<template>
  <!-- 有子菜单就渲染成 el-sub-menu -->
  <el-sub-menu v-if="hasChildren" :index="menu.path" :popper-append-to-body="false">
    <template #title>
      <el-icon v-if="menu.icon" :size="iconSize">
        <component :is="menu.icon" />
      </el-icon>
      <span>{{ menu.title }}</span>
    </template>

    <!-- 递归渲染子菜单 -->
    <Menultem v-for="child in menu.children" :key="child.path" :menu="child" :depth="depth + 1" />
  </el-sub-menu>

  <!-- 没有子菜单就渲染成普通 el-menu-item -->
  <el-menu-item v-else :index="menu.path" :class="{ 'menu-item-depth': depth > 1 }">
    <el-icon v-if="menu.icon" :size="iconSize">
      <component :is="menu.icon" />
    </el-icon>
    <span>{{ menu.title }}</span>
  </el-menu-item>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// 定义菜单项类型
export interface MenuItem {
  path: string
  title: string
  icon?: string
  children?: MenuItem[]
  hidden?: boolean
}

// 接收属性
const props = defineProps<{
  menu: MenuItem
  depth: number
}>()

// 判断是否有子菜单
const hasChildren = computed(() => {
  return props.menu.children && props.menu.children.length > 0
})

// 根据深度调整图标大小
const iconSize = computed(() => {
  return 18 - Math.min(2, props.depth - 1) // 深度越深图标越小，最小16px
})
</script>

<style scoped>
/* 深层次菜单样式调整 */
.menu-item-depth {
  padding-left: 20px !important;
}

/* 图标与文字间距 */
:deep(.el-icon) {
  margin-right: 8px;
}

/* 选中状态样式增强 */
:deep(.el-menu-item.is-active),
:deep(.el-sub-menu__title.is-active) {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* 悬停样式优化 */
:deep(.el-menu-item:hover),
:deep(.el-sub-menu__title:hover) {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
</style>
